<template>
  <div style="width: auto;height: 527px;padding-top:17px;" id="echarts3">
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'echarts3',
    data () {
      return {
        // option配置
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#dce5ff'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['生产目标', '生产数量']
          },
          xAxis: [
            {
              type: 'category',
              data: ['2023-8-26', '2023-8-27', '2023-8-28', '2023-8-29', '2023-8-30', '2023-8-31', '2023-9-1'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '生产趋势',
              min: 0,
              max: 1000,
              interval: 200,
              axisLabel: {
                formatter: '{value} 件'
              }
            },

          ],
          series: [
            {
              color: [
                '#81c4ff'
              ],
              name: '生产目标',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ml';
                }
              },
              data: [
                260, 509, 900, 264, 287, 707, 175.6, 182.2, 487, 188, 601, 230
              ]
            },
            {
              color: [
                '#1e93ff'
              ],
              name: '生产数量',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ml';
                }
              },
              data: [
                200, 490, 700, 232, 256, 767, 135.6, 162.2, 326, 200, 640, 303

              ]
            },
          ]
        }
      }
    },
    mounted () {
      this.echartsInit()
    },
    methods: {
      echartsInit () {
        // 在生命周期中挂载
        echarts.init(document.getElementById('echarts3')).setOption(this.option)
      }
    }
  }
</script>

<style scoped>

</style>
